<template>
  <div class="zdyUpload">
    <el-upload
      v-if="!isPdf&&!isReport"
      :action="uploadFileUrl"
      :list-type="listType"
      :headers="headers"
      :multiple="multiple"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="handleBeforeUpload"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
    >
      <i class="el-icon-plus" />
      <!-- <div v-if="isShowTip" slot="tip" class="el-upload__tip">图片最多不超过{{ limit }}张，每张不超过{{ fileSize/1000 }}M</div>
      <div v-if="isShowVideo" slot="tip" class="el-upload__tip">视频最多不超过{{ limit }}部，每部不超过{{ fileSize/1000 }}M</div> -->
    </el-upload>
    <el-upload
      v-if="isPdf"
      class="upload-demo"
      drag
      :action="uploadFileUrl"
      :headers="headers"
      :limit="limit"
      :file-list="fileList"
      :before-upload="handleBeforeUpload"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div v-if="isExcel" slot="tip" class="el-upload__tip">只能上传Excel文件</div>
      <div v-else slot="tip" class="el-upload__tip">只能上传pdf文件</div>
    </el-upload>

    <el-upload
      v-if="isReport"
      ref="childUpload"
      class="upload-demo"
      drag
      :action="uploadFileUrl"
      :http-request="myUploadFileUrl"
      :headers="headers"
      :limit="limit"
      :file-list="fileList"
      :before-upload="handleBeforeUpload"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
      :auto-upload="false"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传{{ fileTypeText }}文件</div>
    </el-upload>

    <el-dialog append-to-body :visible.sync="dialogVisible">
      <img width="60%" :src="dialogImageUrl" alt>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: '',
  props: {
    limit: {
      type: Number,
      default: 9
    },
    fileType: {
      type: Array,
      default: () => ['doc', 'xls', 'xlsx', 'ppt', 'txt', 'pdf', 'png', 'jpg', 'jpeg', 'mp4', 'avi', 'zip', 'rar']
    },
    fileSize: {
      type: Number,
      default: 0
    },
    isShowTip: {
      type: Boolean,
      default: true
    },
    isShowVideo: {
      type: Boolean,
      default: false
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    multiple: {
      type: Boolean,
      default: true
    },
    fileList: {
      type: Array,
      default: () => []
    },
    isPdf: {
      type: Boolean,
      default: false
    },
    isExcel: {
      type: Boolean,
      default: false
    },
    isReport: {
      type: Boolean,
      default: false
    },
    myUploadFileUrl: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      uploadFileUrl: '',
      headers: {
        Authorization: `Bearer ${getToken()}`
      },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {
    fileTypeText() {
      return this.fileType.join(', ')
    }
  },
  watch: {},
  async created() {
    this.uploadFileUrl = process.env.VUE_APP_BASE_API + '/api/localStorage/addCustomPath'
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.$emit('handleRemove', fileList)
    },
    // 上传图片
    handleSuccess(response, file, fileList) {
      // debugger
      // if (!fileList.every(ele => ele.status == 'success'||ele.code==200)) {
      //   this.$message.warning('上传失败')
      // }
      // fileList = fileList.filter(ele => ele.status == 'success')
      this.$emit('handleSuccess', fileList)
    },
    handleError(response, file, fileList) {
      console.log(response, file, fileList, '上传失败')
    },
    // 文件个数超出限制
    handleExceed() {
      this.$message.warning(`上传文件数量不能超过 ${this.limit} 个，请先删除不需要的文件！`)
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = ''
        if (file.name.lastIndexOf('.') > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
        }
        const isTypeOk = this.fileType.some(type => {
          return fileExtension && fileExtension.indexOf(type) > -1
        })
        if (!isTypeOk) {
          this.$message.warning(`文件格式不正确，请上传${this.fileType.join('/')}格式文件！`)
          return false
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        // KB
        const fileSize = file.size / 1024
        const isLt = fileSize < this.fileSize
        if (!isLt) {
          this.$message.warning(`上传文件大小不能超过 ${this.fileSize} KB!`)
          return false
        }
      }
      return true
    }
  }
}
</script>

<style scoped lang="scss">
</style>
